package com.hhh.tools.ui.screens

import android.widget.Toast
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextOverflow.Companion.Ellipsis
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavController
import androidx.navigation.compose.rememberNavController
import com.hhh.tools.R
import com.hhh.tools.ui.components.AppTitle
import com.hhh.tools.ui.theme.ComposeDemoTheme
import com.hhh.tools.ui.theme.line
import com.hhh.tools.ui.theme.normalTextColor

@Preview
@Composable
fun PreviewSettingPage() {
    val navController = rememberNavController()
    SettingPage(navController)
}

@Composable
fun SettingPage(navController: NavController) {
    ComposeDemoTheme {
        Column(
            Modifier
                .background(MaterialTheme.colors.background)
                .fillMaxSize()
        ) {
            AppTitle("设置") {
                navController.popBackStack()
            }
            Spacer(
                Modifier
                    .height(15.dp)
            )
            SettingItem1("神经蛙", "13800138000")
            Spacer(
                Modifier
                    .height(15.dp)
            )
            SettingItem2(navController)
            Spacer(
                Modifier
                    .weight(1f)
            )
            ExitItem()
        }
    }
}

@Composable
fun ExitItem() {
    Button(
        onClick = {},
        elevation = null,
        colors = ButtonDefaults.buttonColors(Color(0xFFFC501A)),
        modifier = Modifier
            .padding(16.dp, 0.dp, 16.dp, 16.dp)
            .fillMaxWidth()
            .height(44.dp),
        shape = RoundedCornerShape(24.dp)
    ) {
        Text(text = "退出登录", color = Color.White, fontSize = 16.sp)
    }
}

@Composable
fun SettingItem1(name: String, account: String) {
    Card(
        backgroundColor = Color.White, shape = RoundedCornerShape(6.dp),
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 16.dp)
    ) {
        Column {
            UserInfoItem(name, account)
            Divider(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(0.5.dp),
                color = MaterialTheme.colors.line
            )
            QrCodeItem()
            Divider(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(0.5.dp),
                color = MaterialTheme.colors.line
            )
            AddressManageItem()
        }
    }
}

@Composable
fun AddressManageItem() {
    Row(
        modifier = Modifier
            .padding(horizontal = 16.dp)
            .height(50.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            text = "地址管理",
            fontSize = 14.sp,
            color = MaterialTheme.colors.normalTextColor,
            modifier = Modifier
                .weight(1f)
        )
        Text(
            text = "新增/修改地址",
            fontSize = 14.sp,
            color = MaterialTheme.colors.normalTextColor,
            modifier = Modifier
                .padding(horizontal = 4.dp)
        )
        Icon(
            painterResource(id = R.drawable.ic_right_c8c8c8_18dp),
            contentDescription = "next",
            tint = Color(0xFFC8C8C8),
            modifier = Modifier
                .size(16.dp)
        )
    }
}

@Composable
fun QrCodeItem() {
    Row(
        modifier = Modifier
            .padding(horizontal = 16.dp)
            .height(50.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            text = "我的二维码",
            fontSize = 14.sp,
            color = MaterialTheme.colors.normalTextColor,
            modifier = Modifier
                .weight(1f)
        )
        Image(
            painterResource(id = R.mipmap.default_avatar4),
            contentDescription = "我的二维码",
            modifier = Modifier
                .padding(horizontal = 4.dp)
                .size(20.dp)
        )
        Icon(
            painterResource(id = R.drawable.ic_right_c8c8c8_18dp),
            contentDescription = "next",
            tint = Color(0xFFC8C8C8),
            modifier = Modifier
                .size(16.dp)
        )
    }
}

@Composable
fun UserInfoItem(name: String, account: String) {
    Row(
        modifier = Modifier
            .height(86.dp)
            .padding(horizontal = 16.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Image(
            painter = painterResource(id = R.mipmap.default_avatar4),
            contentScale = ContentScale.Crop,
            contentDescription = "头像",
            modifier = Modifier
                .size(50.dp)
        )
        Column(
            modifier = Modifier
                .weight(1.0f)
                .height(60.dp)
                .padding(horizontal = 10.dp),
            verticalArrangement = Arrangement.Center
        ) {
            Text(text = name, fontSize = 14.sp, maxLines = 1, overflow = Ellipsis)
            Text(text = account, fontSize = 14.sp, maxLines = 1, overflow = Ellipsis)
        }
        Icon(
            painterResource(id = R.drawable.ic_right_c8c8c8_18dp),
            contentDescription = "next",
            tint = Color(0xFFC8C8C8),
            modifier = Modifier
                .size(16.dp)
        )
    }
}

@Composable
fun SettingItem2(navController: NavController) {
    val context = LocalContext.current
    Card(
        backgroundColor = Color.White, shape = RoundedCornerShape(6.dp),
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 16.dp)
    ) {
        Column {
            SettingItem("账户与安全", Modifier.clickable {
                Toast
                    .makeText(context, "账户与安全click", Toast.LENGTH_SHORT)
                    .show()
            })
            Divider(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(0.5.dp),
                color = MaterialTheme.colors.line
            )
            SettingItem("银行卡管理", Modifier.clickable {
                Toast
                    .makeText(context, "银行卡管理click", Toast.LENGTH_SHORT)
                    .show()
            })
            Divider(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(0.5.dp),
                color = MaterialTheme.colors.line
            )
            SettingItem("意见反馈", Modifier.clickable {
                Toast
                    .makeText(context, "意见反馈click", Toast.LENGTH_SHORT)
                    .show()
            })
            Divider(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(0.5.dp),
                color = MaterialTheme.colors.line
            )
            SettingItem("关于聚刷刷", Modifier.clickable {
                navController.navigate("about_page")
            })
        }
    }
}

@Composable
fun SettingItem(text: String, modifier: Modifier = Modifier) {
    Row(
        modifier = modifier
            .padding(horizontal = 16.dp)
            .height(50.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            text = text,
            fontSize = 14.sp,
            color = MaterialTheme.colors.normalTextColor,
            modifier = Modifier
                .weight(1f)
        )
        Icon(
            painterResource(id = R.drawable.ic_right_c8c8c8_18dp),
            tint = Color(0xFFC8C8C8),
            contentDescription = "next",
            modifier = Modifier
                .size(16.dp)
        )
    }
}